<div class="modal" ng-controller="ModelsIncludedPopupCtrl">
  <div class="modal-dialog modal-wide">
    <div class="modal-content">

      <div class="modal-header">
        <button aria-hidden="true" class="close" data-dismiss="modal" ng-click="close()" type="button">&times;</button>
        <h2>
          {{'APP.POPUP.INCLUDE-MODELS-TITLE' | translate}}
        </h2>
      </div>


      <div class="modal-body modal-body-with-overflow">
        <div class="tabs-wrapper">

          <div active-tab="popup.activeTab" tab-control="tabs">
          </div>

          <div class="item-wrapper clearfix" ng-show="popup.activeTab == 'bpmn'">
            <div class="item fadein" ng-repeat="model in popup.models.data">
              <div class="item-box" ng-click="selectModel(model); $event.stopPropagation();"
                   ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
                <span class="badge">v{{model.version}}</span>
                <div class="btn-group pull-right">
                  <button class="btn btn-default" ng-show="isModelSelected(model)"
                          title="{{'PROCESS.ACTION.DETAILS' | translate}}"
                          type="button">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                  </button>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{model.name}}">
                    {{model.name}}
                  </h3>
                  <div class="basic-details truncate">
                    <span><i class="glyphicon glyphicon-user"></i> {{model.createdBy}}</span> <span
                          title="{{model.lastUpdated | dateformat:'LLLL'}}"><i class="glyphicon glyphicon-pencil"></i> {{model.lastUpdated | dateformat}}</span>
                  </div>
                  <p>{{model.description}}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="item-wrapper clearfix" ng-show="popup.activeTab == 'cmmn'">
            <div class="item fadein" ng-repeat="cmmnModel in popup.cmmnModels.data">
              <div class="item-box"
                   ng-click="selectCmmnModel(cmmnModel); $event.stopPropagation();"
                   ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(cmmnModel.id) + '\')'}">
                <span class="badge">v{{cmmnModel.version}}</span>
                <div class="btn-group pull-right">
                  <button class="btn btn-default" ng-show="isCmmnModelSelected(cmmnModel)"
                          title="{{'PROCESS.ACTION.DETAILS' | translate}}"
                          type="button">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                  </button>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{cmmnModel.name}}">
                    {{cmmnModel.name}}
                  </h3>
                  <div class="basic-details truncate">
                    <span><i class="glyphicon glyphicon-user"></i> {{cmmnModel.createdBy}}</span> <span
                          title="{{cmmnModel.lastUpdated | dateformat:'LLLL'}}"><i
                          class="glyphicon glyphicon-pencil"></i> {{cmmnModel.lastUpdated | dateformat}}</span>
                  </div>
                  <p>{{cmmnModel.description}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="pull-right">
            <button class="btn btn-default" ng-click="close()" ng-disabled="popup.loading" type="button">
              {{'GENERAL.ACTION.CLOSE' | translate}}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
